<template>
  <div class="search">
    <div class="searchInp">
      <van-search
        v-model="value"
        placeholder="搜索歌曲、歌手"
        shape="round"
        background="#222222"
      />
    </div>
    <div class="hotSearch">
      <p>热门搜索</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.search {
  .searchInp {
    .wh(375,54);
    background: @bgcolor;
    color: @bgcolor;
    /deep/.van-search__content--round {
      background: @bg3;
      .van-field {
        color: rgba(225, 225, 225, 0.6);
      }
    }
  }
  .hotSearch {
    .wh(375,525);
    background: @bgcolor;
    p {
      color: rgba(225, 225, 225, 0.6);
      .fs(16);
      .padding(10,0,0,15);
    }
  }
}
</style>
